<template>
  <div class="event-container">
    <div class="event-header van-hairline--bottom">
      <van-dropdown-menu :overlay="false">
        <van-dropdown-item
          :value="categoryId"
          :options="categorys"
          @change="onChangeCategory"
          @open="onOpen"
          @opened="isOpened"
        />
      </van-dropdown-menu>
      <van-search
        :value="keyword"
        placeholder="请输入搜索关键词"
        use-action-slot
        @search="onSearch"
        @change="onChangeKeyword"
        @clear="onClearSearch"
        class="keyword-search"
        custom-class=""
      >
        <view
          slot="action"
          @tap="onSearch"
        >搜索</view>
      </van-search>
    </div>
    <list-scroll-view
      v-model="loading"
      refresher-enabled
      @refresh="onRefresh"
      @load="onListLoad"
    >
      <column
        :format="item.format"
        :title="item.title"
        :description="item.description"
        :medias="item.medias"
        v-for="(item,index) in list"
        :key="index"
        @click="pushNativelink(item.mplink)"
      />
    </list-scroll-view>
  </div>
</template>

<script>
import ListScrollView from '@/components/listScrollView/index'
import Column from '@/components/column/index'
import { getNeedsList, getCategoryOptions } from '@/api'

export default {
  components: {
    Column,
    ListScrollView
  },
  data () {
    return {
      id: 0,
      loading: false,
      categorys: [],
      defaultCategory: [
        { text: '全部分类', value: 0 }
      ],
      list: [], // 列表数据
      page: 1, // 当前页数
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      },
      keyword: '',
      categoryId: 0,
      formData: {
        cid: 0,
        keyword: ''
      }
    }
  },
  onLoad (option) {
    console.log(option)
    if (option.id) {
      this.categoryId = parseInt(option.id)
    } else {
      this.categoryId = 0
    }
    if (option.keyword) {
      this.keyword = decodeURIComponent(option.keyword)
    } else {
      this.keyword = ''
    }
  },
  created () {
    console.log('Page needs/index created')
  },
  beforeMount () {
    this.getCategory()
    if (!this.keyword) {
      this.getList()
    }
  },
  mounted () {
    // 创建节点选择器
    var query = wx.createSelectorQuery()
    // 选择id
    query.select('#test').boundingClientRect()
    query.exec(function (res) {
      // res就是 所有标签为mjltest的元素的信息 的数组
      console.log('event/index mounted', res)
    })
  },
  methods: {
    onClickViewEvent (id) {
      console.log('event/index onClickViewEvent', id)
      // wx.navigateTo({
      //   url: '/pages/submatch/index/main?id=' + id
      // })
    },
    onOpen () {
      console.log('onOpen ....')
    },
    isOpened () {
      console.log('event/index isOpened')
    },
    lower () {
      console.log('event/index lower')
    },
    scroll () {
      console.log('event/index scroll')
    },
    // 获取数据方法
    getCategory () {
      getCategoryOptions().then(res => {
        this.categorys = [...this.defaultCategory, ...res]
        console.log(this.categorys)
      })
    },
    onChangeCategory (e) {
      console.log('[[[[[[[[[[[[onChangeCategory', e)
      this.categoryId = e.mp.detail
      this.onSearch()
    },
    onChangeKeyword (e) {
      this.keyword = e.mp.detail
    },
    onClearSearch () {
      this.keyword = ''
    },
    // 获取数据方法
    onSearch () {
      this.page = 1
      this.getList()
    },
    // 获取数据方法
    getList () {
      console.log('needs/index getList')
      const that = this
      that.loading = false
      let startTime = new Date()
      let params = {
        page: that.page // 传递页码
      }
      if (that.formData) {
        params = Object.assign(params, {
          cid: that.categoryId,
          keyword: that.keyword
        })
      }
      console.log('GetLIST PARAMS:', params)
      getNeedsList(params).then(res => {
        console.log('data', res)
        // 关闭下拉刷新动画
        wx.stopPullDownRefresh()
        // 返回的数据
        const data = res
        console.log('data', data)

        let itemCount = data.items.length
        if (itemCount > 0) {
          if (that.page > 1) {
            that.list.push(...data.items)
          } else {
            that.list = data.items
          }
        } else {
          that.list = []
        }
        that.meta = data.meta

        let endtime = new Date()
        let duration = endtime - startTime
        if (duration < 1500) {
          console.log('duration', duration)
          setTimeout(() => {
            that.loading = true
          }, 1500 - duration)
        } else {
          that.loading = true
        }
      }).catch(e => {
        console.error(e)
      })
    },

    onRefresh () {
      // 初始化页码
      this.page = 1
      this.getList()
    },
    // 上拉加载
    onListLoad () {
      // 执行上拉执行的功能
      if (this.meta.pageCount <= this.meta.currentPage) {
        console.log('数据加载完了')
      } else {
        // 下一页
        this.page = this.page + 1
        this.getList()
      }
    }
  }
}
</script>

<style lang="less">
page {
  height: 100%;
}
.event-container {
  padding-top: 54px;
  position: relative;
  height: 100%;
}
.van-icon,
.van-icon::before {
  display: block !important;
}
.event-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  .keyword-search {
    flex-grow: 1;
  }
  .van-dropdown-menu {
    box-shadow: none;
    width: 80px;
  }
}
.van-overlay {
  background: transparent;
}
.event-list {
  height: 100%;
}
.event-list-item {
  &.van-card {
    padding: 15px;
    background: transparent;
  }
  .van-card__img {
    border-radius: 5px;
  }
  .van-card__title {
    font-size: 16px;
    line-height: 24px;
    font-weight: normal;
  }
  .van-card__desc {
    font-size: 10px;
  }
  .van-card__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .van-card--bottom {
    color: #bccce5;
    display: flex;
    align-items: center;
    .van-icon {
      margin-right: 3px;
    }
  }
  .van-card--footer {
    padding: 5px 5px 0 96px;
    text-align: left;
    display: flex;
    align-items: center;
    .van-tag {
      margin-right: 5px;
    }
  }
}

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.log-item {
  margin: 10rpx;
}
</style>
